<template>
    <div class="me-detail">
      <div class="user-detail-top">基本信息</div>
      <div class="user-detail-group">
        <div class="user-icon">
          <span>头像</span>
          <img src="./image/me_icon.png" alt="">
        </div>
        <div class="user-item">
          <span>手机</span>
          <span>{{user_phone}}</span>
        </div>
        <div class="user-item">
          <span>昵称</span>
          <span><input type="text" v-model="user_name"></span>
        </div>
        <div class="user-item" @click="sheetVisible=true">
          <span>性别</span>
          <span>{{user_sex}}</span>
        </div>
        <div class="user-item">
          <span>常驻地</span>
          <span><input type="text" v-model="user_address"></span>
        </div>
        <div class="user-item" @click="openPicker">
          <span>生日</span>
          <span>{{user_birthday}}</span>
        </div>
        <div class="user-item">
          <span>个性签名</span>
          <span><input type="text" v-model="user_sign"></span>
        </div>
        <button @click="handleAlert">修改</button>
      </div>
      <!--选择性别-->
      <mt-actionsheet
        :actions="actions"
        v-model="sheetVisible">
      </mt-actionsheet>
      <!--选择出生年月-->
      <mt-datetime-picker
        ref="picker"
        type="date"
        @confirm="handleConfirm"
        :startDate="start"
        :endDate = 'end'
        year-format="{value} 年"
        month-format="{value} 月"
        date-format="{value} 日">
      </mt-datetime-picker>
    </div>
</template>

<script>
    /*引入专门处理日期的第三方插件*/
    import moment from 'moment'
    import {mapState,mapActions} from 'vuex'
    import {Toast} from 'mint-ui'
    import { alertUserInfo } from '../../api/index'
    export default {
        name: 'MeDetail',
        data(){
          return {
            user_sign: '未填写',
            user_address: '未填写',
            user_name: '未填写',
            user_sex: '',
            user_phone: '',
            user_birthday: '',
            sheetVisible: false,
            actions: [
              {
                name: '男',
                method: this.selectSex
              },
              {
                name: '女',
                method: this.selectSex
              }
            ],
            start: new Date('1960-01-01'),
            end: new Date('2050-01-01')
          }
        },
        computed: {
          ...mapState(['userInfo']),
          ...mapActions(['alertUserInfo'])  //为什么修改用户信息不能通过actions操作呢？？？ 因为没有dispatch操作
        },
        methods: {
            selectSex(props){
              this.user_sex = props.name;
            },
            openPicker() {
              this.$refs.picker.open();
           },
          handleConfirm(props){
              this.user_birthday = moment(props).format("YYYY年MM月DD日");
          },
          async handleAlert(){
              let result = await alertUserInfo({user_id: this.userInfo.id, user_name: this.user_name, user_sex: this.user_sex, user_address: this.user_address, user_birthday: this.user_birthday, user_sign: this.user_sign});
              if(result.success_code == 200){
                Toast({
                  message: '修改用户信息成功！',
                  position: 'bottom',
                  duration: 2000
                });
                // 更新本地数据,通过dispatch方式提交到actions中
                this.$store.dispatch('getUserInfo');
                // 返回主界面
                setTimeout(()=>{
                  this.$router.replace('/mine');
                },2000)
              }else {
                Toast({
                  message: result.message,
                  position: 'bottom',
                  duration: 2000
                });
              }

              // 方式二：使用actions的方式
             //this.alertUserInfo({user_id: this.userInfo.id, user_name: this.user_name, user_sex: this.user_sex, user_address: this.user_address, user_birthday: this.user_birthday, user_sign: this.user_sign})
          }
        },
        mounted(){
          this.user_sign= this.userInfo.user_sign || '',
          this.user_address= this.userInfo.user_address || '',
          this.user_name= this.userInfo.user_name || '',
          this.user_sex= this.userInfo.user_sex || '',
          this.user_phone=this.userInfo.phone || '',
          this.user_birthday= this.userInfo.user_birthday || ''
        }
    }
</script>

<style scoped lang="stylus" ref="stylesheet/stylus">
  .me-detail
    width 100%
    height 100%
    .user-detail-top
      width 100%
      height 60px
      line-height 60px
      padding-left 10px
      font-weight bold
      text-align center
    .user-detail-group
      .user-icon
        height 60px
        padding 0 10px
        background-color: #fff
        border-bottom 1px solid #e0e0e0
        display flex
        justify-content space-between
        align-items center
        img
          width 50px
          border-radius 50%
      .user-item
        height 40px
        padding 0 10px
        background-color: #fff
        border 1px solid #e0e0e0
        display flex
        justify-content space-between
        align-items center
        input
          border none
          outline none
          text-align right
      button
        width 90%
        height 40px
        line-height 40px
        background-color: #e9232c
        text-align center
        margin 20px 5%
        border none
        font-size 16px
        color #fff
        border-radius 10px
</style>
